<template>
  <div class="container">
    <van-form
      class="passport-form"
      validate-first
      ref="form"
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        v-model="mobile"
        name="mobile"
        label="+86"
        placeholder="请输入手机号"
        maxlength="11"
        type="tel"
        left-icon="mobile"
        icon-prefix="my-icon"
        :rules="rules.mobile"
        @input="onValidateInput"
      />
      <van-field
        v-model="password"
        name="password"
        type="password"
        placeholder="设置帐号登录密码"
        left-icon="lock"
        icon-prefix="my-icon"
        :rules="rules.password"
        @input="onValidateInput"
      />
      <van-field
        v-model="captcha"
        type="digit"
        name="code"
        placeholder="请输入验证码"
        left-icon="captcha"
        icon-prefix="my-icon"
        :rules="rules.captcha"
        maxlength="6"
        @input="onValidateInput"
        @click-right-icon="sendMobileCode"
      >
        <template slot="right-icon">
          <span>{{ countdown ? countdown + 's' : '获取验证码'}}</span>
          <van-icon
            v-if="!countdown"
            name="arrow"
          />
        </template>
      </van-field>
      <div class="passport-form-action">
        <van-button
          round
          block
          type="warning"
          native-type="submit"
          :disabled="disableSubmit"
        >
          完 成
        </van-button>
      </div>
    </van-form>
    <div class="passport-tips">
      <span>点击“完成”按钮，即表示同意</span>
      <router-link
        :to="{name: 'help'}"
        class="rlink"
      >《隐私权声明》</router-link>
    </div>
    <!-- DEBUG TOOL -->
    <debug />
  </div>
</template>

<script>
import {
  Row,
  Col,
  Cell,
  Button,
  CellGroup,
  Form,
  Field,
  Area,
  Icon,
  Image,
  Loading,
  ActionSheet,
  Lazyload
} from 'vant'
import Debug from '@/components/debug'

export default {
  name: 'Register',
  components: {
    Debug,
    [Button.name]: Button,
    [Loading.name]: Loading,
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Form.name]: Form,
    [Area.name]: Area,
    [Icon.name]: Icon,
    [Image.name]: Image,
    [ActionSheet.name]: ActionSheet,
    Lazyload
  },
  data () {
    return {
      mobile: '',
      password: '',
      captcha: '',
      sms: '',
      countdown: 0,
      errors: null,
      disableSendSms: true,
      disableSubmit: true,
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号码'
          },
          {
            pattern: /^[1][3-9][0-9]{9}$/,
            message: '请输入正确的11手机号码'
          }
        ],
        password: [
          {
            required: true,
            message: '请设置密码'
          },
          {
            pattern: /\d{8}/,
            message: '密码长度需在8位以上'
          }
        ],
        captcha: [
          {
            required: true,
            message: '请输入短信验证码'
          },
          {
            pattern: /\d{6}/,
            message: '验证码不正确'
          }
        ]
      }
    }
  },
  watch: {
    errors: {
      handler (cv, ov) {
        console.log('failed', cv)
      },
      deep: true
    }
  },
  computed: {
    disableSend () {
      return this.disableSendSms || this.countdown > 0
    }
  },
  created () {
    console.group('Register')
    // console.log(this.$options.computed)
    // console.log(this.$options.data.call(this))

    console.groupEnd('Register')
  },
  methods: {
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
      this.errors = errorInfo.errors

      console.log('failed', this.$refs.form)
    },
    onValidateInput (value) {
      this.$refs.form
        .validate()
        .then(() => {
          this.disableSubmit = false
        })
        .catch(e => {
          this.disableSubmit = true
        })
    },
    onSubmit (data) {
      console.log('submit', data)
      this.disableSubmit = true
      this.$http.passport.register(data).then(res => {
        console.log(res, res.data)
        if (res.data) {
          this.$router.replace({
            path: '/passport/perfect'
          })
        } else {
          this.$toast('提交失败~')
          this.disableSubmit = false
        }
      })
    },
    sendMobileCode () {
      let mobile = this.mobile
      if (!mobile) {
        this.$toast('手机号码不能为空')
      } else if (!/^[1][3-9][0-9]{9}$/.test(mobile)) {
        this.$toast('手机号码不正确')
      } else if (this.countdown > 0) {
        this.$toast('已发送至您的手机')
      } else {
        this.$http.base
          .sendSmsCode({
            mobile: this.mobile,
            scope: 'register'
          })
          .then(response => {
            if (response.data) {
              this.$toast('发送成功')
              this.countdown = 60
              this.countdownSubtract()
            } else {
              this.$toast('发送失败')
            }
          })
      }
    },
    countdownSubtract () {
      if (this.countdown > 0) {
        setTimeout(() => {
          this.countdown -= 1
          this.countdownSubtract()
        }, 1000)
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.van-loading {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
